<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="./css/baseCss.css">
	<link rel="stylesheet" type="text/css" href="./swiper/swiper-3.4.0.min.css">
	<title>首页</title>
	<style type="text/css">
		body{
			min-width: 1200px;
		}


		.centerEve{
			width: 1200px;
			margin: 0 auto;
		}
		.centerTitle{
			padding: 40px 0 20px 0;
			overflow: auto;
			background-color: #fff;
		}
		.centerTitle_left{
			color: #313131;
			font-weight: 600;
			float: left;
		}
		.centerTitle_left img{
			vertical-align: text-bottom;
			margin: 0 10px 0 20px;
		}
		.centerTitle_right{
			float: right;
			color: #999999;
			border: 1px solid #999999;
			border-radius: 100px;
			padding: 0 8px 0 10px;
		}

		.centerPage{
			text-align: center;
			background-color: #fff;
			padding: 40px 0;
		}

		.centerEve.profess{
			width: 100%;
		}
		/*轮播图*/
		.swiper-container,.swiper-lazy{
			width: 100%;
			height: 100%;
		}
		.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
			background-image: url('./img/prev.png');
			width: 50px;
			height: 50px;
			background-size: 50px 50px;
			left: 300px;
		}
		.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
			background-image: url('./img/next.png');
			width: 50px;
			height: 50px;
			background-size: 50px 50px;
			right: 300px;
		}
		
	</style>
</head>

<body>
	<div id="example">
		<all-header></all-header>
		<!--<header>-->
			<!--<div class="centerTop">-->
				<!--<div class="centerLogo" onclick="window.location.href='./index.html'"><img src="./img/bigLogo.jpg"></div>-->
				<!--<div class="centerList">-->
					<!--<div onclick="window.location.href='./video.html'">视频课程</div><div>考试中心</div>-->
				<!--</div>-->
				<!--<div class="centerLr">-->
					<!--<div class="centerLr_div" onclick="window.location.href='./login.html'">登录</div>-->
				<!--</div>-->
			<!--</div>-->
		<!--</header>-->
		<section>
			<div class="centerBg">
				<div class="swiper-container">
 				 	<div class="swiper-wrapper">
  						<div class="swiper-slide" v-for="focusImg in focusImgList">
  				 			<img :src="add(focusImg.image)" class="swiper-lazy">
						</div>
						<!--<div class="swiper-slide">
  				 			<img src="./img/bg02.jpg" class="swiper-lazy">
						</div>
						<div class="swiper-slide">
  				 			<img src="./img/bg03.jpg" class="swiper-lazy">
						</div>-->
  					</div>
  					<!-- 如果需要导航按钮 -->
        			<div class="swiper-button-prev"></div>
        			<div class="swiper-button-next"></div>
				</div>
			</div>
		</section>
		<section class="centerEve">
			<div class="centerTitle">
				<div class="centerTitle_left"><span><img src="./img/centerT01.png"></span><span>专业列表</span></div>
				<!-- <div class="centerTitle_right" @click="disVideo(1)">更多&nbsp></div> -->
			</div>
			<div class="centerConInc">
				<pub-course v-for="pubCourse in pubCourseList" :id="pubCourse.id" :name="pubCourse.name" :image="pubCourse.image"></pub-course>
				<!--<div class="centerCon">-->
					<!--<div class="centerCon_img"><img class="imgBai" src="./img/centerEve.jpg"></div>-->
					<!--<div class="centerCon_font">-->
						<!--<div class="centerCon_bfont">课程标题名称</div>-->
						<!--<div class="centerCon_sfont">小标题</div>-->
					<!--</div>-->
				<!--</div>-->
			</div>
		</section>
		<!-- <section class="profess centerEve centerEveCl">
			<div class="centerEveTit_inc">
				<div class="centerTitle">
				<div class="centerTitle_left"><span><img src="./img/centerT02.png"></span><span>专业课程</span></div>
				<div class="centerTitle_right" @click="disVideo(2)">更多&nbsp></div>
			</div>
			</div>
			<div class="professOutinc centerEveCon_inc">
				<div class="professInc centerConInc">
					<pro-fessional v-for="proCourse in proCourseList" :id="proCourse.id" :name="proCourse.name" :introduce="proCourse.introduce" :photo="proCourse.photo"></pro-fessional>
				</div>
			</div>
			<div class="centerPage">
				<div id='page'></div>
			</div>
		</section> -->
		<all-footer></all-footer>
	</div>
</body>
<script type="text/javascript" src="./js/modeldata.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./swiper/swiper-3.4.0.min.js"></script>
<script type="text/javascript" src="./js/initPage.js"></script>
<script type="text/javascript" src="./js/httpUnit.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./component/allHeader.js"></script>
<script type="text/javascript" src="./component/allFooter.js"></script>
<script type="text/javascript" src="./component/professional.js"></script>
<script type="text/javascript" src="./component/publicCourse.js"></script>
<script type="text/javascript">
    

    indexVue();

	//首页Vue函数
	function indexVue() {
        var allheader = allHeader();
	    var allfooter = allFooter();
        var pubcourse = pubCourse();
        var professional = proFessional();
        var vm = new Vue({
            el: '#example',
            data: {
                pubCourseList:"",
                proCourseList:"",
                focusImgList:"",//轮播图列表
				flag : false
			},
			mounted:function () {
				this.flag = true;
				// if(sessionStorage.getItem("loginInfo") != null){
				// 	this.flag = true;
				// } else {
				// 	httpHelperpost("/api/students/createToken", null, function (isSuccess, data) {
				// 		if (isSuccess === true) {
				// 			var response = data.responseText;
				// 			var res = JSON.parse(response);
				// 			if (res.code == 0) {
				// 				var loginInfo = {
				// 					"jwt": res.data.jwt,
				// 					"info": {
				// 						"name": res.data.name,
				// 						"majorName": res.data.majorName,
				// 						"gradeName": res.data.gradeName,
				// 						"stuNo": res.data.stuNo,
				// 						"photo": res.data.photo
				// 					}
				// 				};
				// 				sessionStorage.setItem("loginInfo", JSON.stringify(loginInfo));
				// 				vm.flag = true;
				// 				console.log("登陆成功");
				// 			} else {
				// 				alert("登录失败，请重新登录")
				// 			}
				// 		} else {}
				// 	});
				// }
            },
			watch:{
				flag:function () {
					if(this.flag){
						//轮播图
						this.findFocusImgList();
						this.allprofess();
						//获取专业课程前4个
						// this.subjectsSub(2);
						//获取公共课程前3个
						// this.subjectsSub(1);
						this.flag = false;
						// setTimeout(function(){
						// 	vm.mySwiper();
						// },1000)

					}
				},
				focusImgList:function(){
					this.mySwiper();
				}
			},
			methods:{
                // 获取全部专业
                allprofess:function(){
                	this.pubCourseList = PUBCOURSELIST.data;

                	// httpHelperget("/api/majors/all", function(isSuccess, data) {
                 //        if (isSuccess == true) {
                 //            var response = data.responseText;
                 //            var value = JSON.parse(response);

                 //            // console.log(response);

                 //            if(value.code == 0){

                 //            	vm.pubCourseList=value.data;
                 //                console.log("查询成功");

                 //            }else if(value.code==401){
                 //                alert(value.message);
                 //                window.location.href='./login.html';
                 //            }else{
                 //                alert(value.message);
                 //                console.log("查询失败");
                 //            }
                 //        }else {}
                 //    });
                },
                //轮播图函数
                findFocusImgList:function(){
                	this.focusImgList = FOCUSIMGLIST.data;
        //             httpHelperget("/api/focusImgs/findFocusImgList", function(isSuccess, data) {
        //                 if (isSuccess == true) {
        //                     var response = data.responseText;
        //                     var value = JSON.parse(response);

        //                     console.log(response);

        //                     if(value.code == 0){

        //                     	vm.focusImgList=value.data;
								// console.log(vm.findFocusImgList);
        //                         console.log("查询成功");

        //                     }else if(value.code==401){
        //                         alert(value.message);
        //                         window.location.href='./login.html';
        //                     }else{
        //                         alert(value.message);
        //                         console.log("查询失败");
        //                     }
        //                 }else {}
        //             });
                },
                //轮播图初始化
                mySwiper:function(){
                	var mySwiper = new Swiper ('.swiper-container', {
    				    // 轮播图的方向，也可以是vertical方向
    				    direction:'horizontal',
    				    //播放速度
    				    loop: true,
    				    // 自动播放时间
    				    autoplay:2000,
				
    				    // 播放的速度
    				    speed:2000,
    				    
    				    // 如果需要前进后退按钮
    				    nextButton: '.swiper-button-next',
    				    prevButton: '.swiper-button-prev',
　　				　　　
　　				　　// 这样，即使我们滑动之后， 定时器也不会被清除
　　				　　autoplayDisableOnInteraction : false,
    				});
                },
				add:function (url) {
					// return "/content"+url;
					return url;
				},
				//获取公共课程或获取专业课程
    //             subjectsSub:function(subjectType,isPage){
    //                 var page = 0;
    //                 var size = 0;
    //                 if(subjectType===1){
    //                 	size = 3;
    //                 }else if(subjectType===2){
    //                 	size = 4;
    //                 }
                    
    //                 var sort = "id,asc";
    //                 var obj = JSON.stringify({
    //                     "subjectType": subjectType
    //                 });
    //                 httpHelperpost("/api/subjects/subjects?page="+page+"&size="+size+"&sort="+sort, obj, function(isSuccess, data) {
    //                     if (isSuccess === true) {
    //                         var response = data.responseText;
    //                         var value = JSON.parse(response);

    //                         // console.log(response);

    //                         if(value.code == 0){
    //                         	if(subjectType==1){
    //                         		vm.pubCourseList = value.data.content;
    //                         	}else if(subjectType==2){
    //                 				vm.proCourseList = value.data.content;
    //                 				// vm.pageCha(value.data.totalElements);//初始化分页插件
    //                 			}
                                
    //                             console.log("查询成功");
    //                         }else if(value.code==401){
    //                             alert(value.message);
    //                             window.location.href='./login.html';
    //                         }else{
    //                             alert(value.message);
    //                             console.log("查询失败");
    //                         }
    //                     }else {}
    //                 });
				// },
                //跳转到视频课程按钮
                // disVideo:function (index) {
                //     window.location.href='./video.html?index='+index;
                // }
			},
            components: {
                'all-header': allheader,
                'all-footer': allfooter,
                'pro-fessional':professional,
                'pub-course': pubcourse
            }
        })
    }
</script>

</html>